<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { area, LevelGroup } from '@/utils/api.js'
import Mars3d from '@/components/common/mars3d.vue'
import LeftItem from '@/components/LeftItem.vue'
import RightItem from '@/components/RightItem.vue'
import LeftTitle from '@/components/LeftT.vue'
import RightTitle from '@/components/RightT.vue'
import BsqLine from '@/components/line.vue'

const areas = ref('');
const info = ref({});
const dsjList = ref([])

let anit = ref({
    Cname: "动物统计",
    Ename: "Animal statistics",
    num: 0,
    isnum: true
})

let plat = ref({
    Cname: "植物统计",
    Ename: "Plant statistics",
    num: 0,
    isnum: true
})

let rt1 = {
    Cname: "视频资料",
    Ename: "Video data",
}

let rt2 = {
    Cname: "保护区大事记",
    Ename: "Chronicle of events",
}

const mad = ref(null)

let areaId = '';

const getLevelGroup = async () => {
    let res = await LevelGroup(areaId)
    if (res.code == '200') {
        let ao = res.data.animalMap;
        let po = res.data.plantMap;
        let animal = [ao.levelOne, ao.levelTwo, ao.beijingLevelOne];
        let plant = [po.levelOne, po.levelTwo, po.beijingLevelOne];
        anit.value.num = ao.sum;
        plat.value.num = po.sum;
        drawBar(animal, 'bar1');
        drawBar(plant, 'bar2');
    }
}

const getarea = async () => {
    let res = await area(areaId)
    dsjList.value = res.baseInfo.evenDetail;
    info.value = res.baseInfo
}

const drawBar = (data, demo) => {
    if (document.getElementById(demo) == null) {
        return
    }
    echarts.dispose(document.getElementById(demo));
    let myChart = echarts.init(document.getElementById(demo));
    let color = ["#FF3B2E", "#FFDE2E", "#4B2EFF", "#2ECDFF"];
    let option = {
        xAxis: {
            type: "category",
            data: ["国家Ⅰ级", "国家Ⅱ级", "其他"],
            axisLabel: {
                show: true,
                color: "#fff",
                fontSize: 16,
                fontFamily: "Pingfang",
            },
            splitLine: {
                show: false,
            },
            axisLine: {
                //y轴
                show: false,
            },
            axisTick: {
                //y轴刻度线
                show: false,
            },
        },
        yAxis: {
            type: "value",
            show: false,
        },
        grid: {
            left: "1%",
            right: "1%",
            top: "15%",
            bottom: "15%",
        },
        series: [
            {
                data: data,
                type: "bar",
                showBackground: true,
                barWidth: 70,
                backgroundStyle: {
                    color: "rgba(46, 255, 242, 0.2)",
                },
                label: {
                    show: true,
                    position: "top",
                    color: "#fff",
                    fontSize: 18,
                    fontFamily: "Pingfang",
                    formatter: function (params) {
                        return params.value + "种";
                    },
                },
                itemStyle: {
                    //定义柱子的样式
                    // color:params=>color[params.dataIndex],//定义每根柱子的不同颜色(不渐变)
                    //不同柱子颜色渐变
                    color: (params) => ({
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: color[params.dataIndex], // 柱子最高度% 处的颜色
                            },
                            {
                                offset: 0.8,
                                color: "transparent", // X轴处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    }),
                    borderRadius: [10, 10, 0, 0], //柱子圆角[上右下左]，也可以统一值。
                },
            },
        ],
    };
    myChart.setOption(option);
    setTimeout(function () {
        myChart.resize();
    }, 100);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}



onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    areas.value = areaId;
    getLevelGroup();
    getarea();
    
})

</script>
<template>
    <div>
        <Mars3d ref="mad" />

        <left-item>
            <left-title :msg="anit" />
            <div class="bsq-bar" id="bar1"></div>
            <bsq-line />
            <left-title :msg="plat" />
            <div class="bsq-bar" id="bar2"></div>
        </left-item>

        <right-item>
            <right-title :msg="rt1" />
            <div class="bsq-video">
                <video :src="'/api/visual/' + areas + '/video.mp4'" controls autoplay></video>
            </div>
            <bsq-line />
            <right-title :msg="rt2" />
            <div class="bsq-ce scol">
                <div class="dsj" v-for="(item, index) in dsjList" :key="'dss' + index">
                    <div style="flex: 1">
                        <img :src="tab" alt="" />
                    </div>
                    <div style="flex: 9">
                        <span style="color: #34ceff">{{ item.time }}年 </span>
                        <span>{{ item.text }}</span>
                    </div>
                </div>
            </div>
        </right-item>

        <div class="bsq-info">
            <div class="jbxxtitle">
                <span style="color: white; font-size: 0.26rem; font-family: 'Fite'">基本信息</span>
                <br />
                <span class="xwz">The basic information</span>
            </div>

            <div class="jbxxtitle">
                <span style="color: white; font-size: 0.18rem; margin-right: 0.16rem">境内</span>
                <span style="color: #2efff2; font-size: 0.24rem">{{ info.location }}</span>
            </div>
            <div style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.2rem;
            margin-top: 0.1rem;
          ">
                <div>
                    <span style="color: white; font-size: 0.18rem; margin-right: 0.16rem">建立于(年)</span>
                    <span style="color: #2efff2; font-size: 0.24rem">{{ info.setUp }}</span>
                </div>
                <div>
                    <span style="color: white; font-size: 0.18rem; margin-right: 0.16rem">海拔(米)</span>
                    <span style="color: #2efff2; font-size: 0.24rem">{{
                        info.altitude
                    }}</span>
                </div>
                <div>
                    <span style="color: white; font-size: 0.18rem; margin-right: 0.16rem">占地约(公顷)</span>
                    <span style="color: #2efff2; font-size: 0.24rem">{{ info.size }}</span>
                </div>
            </div>
        </div>

      

    </div>
</template>
<style scoped>
.bsq-bar {
    width: 100%;
    height: 3.2rem;
    overflow: hidden;
}

.bsq-video {
    margin-top: 0.1rem;
    height: 2.3rem;
    border: 1px solid rgba(46, 205, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bsq-video video {
    max-width: 100%;
    height: 100%;
}

.bsq-ce {
    width: 100%;
    height: calc(100% - 4.2rem);
    margin-top: 0.1rem;
}

.dsj {
    display: flex;
    flex-shrink: 0;
    padding: .1rem .2rem;
    margin-bottom: .08rem;
    font-size: .18rem;
    color: white;
    background-color: rgba(46, 255, 242, 0.1);
    border-radius: 8px;
}

.bsq-info {
    width: 9rem;
    height: 1.7rem;
    position: absolute;
    bottom: 0.32rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to top, rgba(0, 130, 122, 0.8) 30%, rgba(0, 130, 122, 0.5) 60%, rgba(0, 130, 122, 0.4) 100%);
}

.jbxxtitle {
    margin-left: .2rem;
    margin-top: .1rem;
}

.xwz {
    color: #2EFFF2;
    font-size: .16rem;
    line-height: .16rem;
    font-family: Pingfang;
    opacity: .5;
}


</style>